<template>
    <div class="overflow-x-hidden">
        <el-card class="rounded-md" shadow="hover">
            <div class="flex flex-items-center" v-waterMarker="{ text: 'BLOG', textColor: '#D9D9D9' }">
                <el-image class="w-60px h-60px rounded-full select-none user-avatar" :src="user.avatar" fit="cover">
                    <template #error>
                        <el-image class="w-34px h-34px rounded-full select-none user-avatar"></el-image>
                    </template>
                </el-image>
                <div class="p-l-20px">
                    <div class="font-bold p-b-8px whitespace-nowrap">
                        <span>{{ user.nickname }}</span>
                    </div>
                    <div class="font-bold whitespace-nowrap">君可愿白衣饮茶，清风瘦马，再听一曲六月雨下。🌻</div>
                </div>
            </div>
        </el-card>

        <!-- <el-row :gutter="20" class="m-t-5px">
            <KoiCard></KoiCard>
            <el-col :span="24" class="m-t-5px">
                <el-card class="rounded-md" shadow="hover">
                    <template #header>
                        🦀日交易趋势
                    </template>
                    <KoiTradeChart></KoiTradeChart>
                </el-card>
            </el-col>
            <el-col :span="12" :lg="12" :md="12" :sm="24" :xs="24" class="m-t-5px">
                <el-card class="rounded-md" shadow="hover">
                    <template #header>
                        🐻地区异常订单排行
                    </template>
                    <KoiLeftChart></KoiLeftChart>
                </el-card>
            </el-col>
            <el-col :span="12" :lg="12" :md="12" :sm="24" :xs="24" class="m-t-5px">
                <el-card class="rounded-md" shadow="hover">
                    <template #header>
                        🐻‍❄️近10日订单量
                    </template>
                    <KoiRightChart></KoiRightChart>
                </el-card>
            </el-col>
        </el-row> -->
        <el-row :gutter="20" class="m-t-5px">
            <el-col :span="24" :lg="24" :md="10" :sm="24" :xs="24">
                <el-card class="rounded-md" shadow="hover">
                    <el-image style="width: 100%;height: 50%;" :src="homeBg" fit="fit"></el-image>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts" name="homePage">
import { getDayText } from "@/utils/random.ts";
import { koiNoticeSuccess } from "@/utils/koi.ts";
import homeBg from "@/assets/images/home/homeBg.jpg";
// import KoiCard from "./components/KoiCard.vue";
// import KoiTradeChart from "./components/KoiTradeChart.vue";
// import KoiLeftChart from "./components/KoiLeftChart.vue";
// import KoiRightChart from "./components/KoiRightChart.vue";
import KoiTimeline1 from "./components/KoiTimeline1.vue";
import KoiTimeline2 from "./components/KoiTimeline2.vue";
import { onMounted } from "vue";
import { getAllInfo } from "@/utils/storage";
const user = getAllInfo()
onMounted(() => {
  // 时间问候语
  koiNoticeSuccess(getDayText(), "欢迎回来~");
});

</script>

<style lang="scss" scoped></style>
